<template>
	<view class="page">
		<view class="ipt-content-box">
			<view class="item-ipt">
				<view class="left-label-name">店铺名称</view>
				<view class="right-content"><input type="text" v-model="shopname" placeholder="请输入"></view>
			</view>
			<view class="item-ipt">
				<view class="left-label-name">真实姓名</view>
				<view class="right-content"><input type="text" v-model="name" placeholder="请输入"></view>
			</view>
			<view class="item-ipt">
				<view class="left-label-name">身份号码</view>
				<view class="right-content"><input type="number" v-model="number" placeholder="请输入"></view>
			</view>
			<view class="item-ipt">
				<view class="left-label-name">手机号码</view>
				<view class="right-content"><input type="text" v-model="mobile" placeholder="请输入"></view>
			</view>
			<view class="item-ipt">
				<view class="left-label-name">经营许可证号</view>
				<view class="right-content"><input type="text" v-model="jingying_number" placeholder="请输入"></view>
			</view>
			<!-- 	<view class="item-ipt">
				<view class="left-label-name">经营类型</view>
				<view class="right-content">
					<picker class="picker" mode="selector" :range="typeArr" range-key="name" :value="typeIndex" @change="selectTypeChange">
						<view class="place-color" v-if="typeIndex < 0">线上/线下、线上、线下</view>
						<view v-else>{{ typeArr[typeIndex].name }}</view>
						<u-icon class="picker-right-icon" name="arrow-right" color="#D3D3D3"></u-icon>
					</picker>
				</view>
			</view> -->
			<view class="item-ipt">
				<view class="left-label-name">选择地区</view>
				<view class="right-content">
					<picker class="picker" mode="region" @change="selectAddresChange">
						<view class="place-color" v-if="!city">省、市、区、街道</view>
						<view v-else> {{ city }}</view>
						<u-icon class="picker-right-icon" name="arrow-right" color="#D3D3D3"></u-icon>
					</picker>
				</view>
			</view>
			<view class="item-ipt">
				<view class="left-label-name">所在街道</view>
				<view class="right-content"><input type="text" v-model="street" placeholder="请输入"></view>
				<view class="user-address" @click="getUserAddress">
					<image src="../../../static/images/shop/addres.png" mode=""></image>
					<text>定位</text>
				</view>
			</view>
			<view class="item-ipt border-none" style="align-items: flex-start;">
				<view class="left-label-name">详细地址</view>
				<view class="right-content">
					<textarea type="text" v-model="address" placeholder="小区楼栋/乡村名称" />

				</view>
			</view>
		</view>
		<view class="kong"></view>

		<view class="bottom-upfile-box">
			<view class="item-file-box border-btm">
				<view class="upfile-title">店铺头像</view>
				<view class="img-content">
					<view class="img-box" v-for="(item,index) in avatar" :key="index" v-if="avatar.length != 0">
						<!-- 关闭按钮 -->
						<image class="clear-img" @click.stop="clearImg('avatar', index)"
							src="/static/images/shop/guanbi.png"></image>

						<image @click="lookImg('avatar', index)" :src="$wanlshop.oss(item)" mode="aspectFit"></image>
					</view>

					<!-- 上传 -->
					<view class="upfile-img img-box" @click="addImgFile('avatar')" v-if="avatar.length == 0">
						<!-- <image src="/static/images/shop/upfile.png"></image> -->
						<text class="wlIcon-31paishe"></text>
					</view>
				</view>
			</view>

			<view class="item-file-box border-btm">
				<view class="upfile-title">身份证图片</view>
				<view class="img-content">
					<view class="img-box" v-for="(item,index) in image" :key="index" v-if="image.length != 0">
						<!-- 关闭按钮 -->
						<image class="clear-img" @click.stop="clearImg('image', index)"
							src="/static/images/shop/guanbi.png"></image>

						<image @click="lookImg('image', index)" :src="$wanlshop.oss(item)" mode="aspectFit"></image>
					</view>

					<!-- 上传 -->
					<view class="upfile-img img-box" @click="addImgFile('image')" v-if="image.length < 2">
						<text class="wlIcon-31paishe"></text>
					</view>
				</view>
			</view>

			<view class="item-file-box">
				<view class="upfile-title">营业执照</view>
				<view class="img-content">
					<view class="img-box" v-for="(item,index) in yingye_image" :key="index"
						v-if="yingye_image.length != 0">
						<!-- 关闭按钮 -->
						<image class="clear-img" @click.stop="clearImg('yingye_image', index)"
							src="/static/images/shop/guanbi.png"></image>

						<image @click="lookImg('yingye_image', index)" :src="$wanlshop.oss(yingye_image)"
							mode="aspectFit"></image>
					</view>

					<!-- 上传 -->
					<view class="upfile-img img-box" @click="addImgFile('yingye_image')"
						v-if="yingye_image.length == 0">
						<!-- <image src="/static/images/shop/upfile.png"></image> -->
						<text class="wlIcon-31paishe"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="submit-btn-box">
			<view class="submit-btn" @click="submit">提交</view>
		</view>

		<!-- 提交弹窗 -->
		<view class="shop-popup-box" v-show="popupType">
			<view class="success-box" :style="{ backgroundImage: 'url(' + imgUrl + '/bg-2.png'  + ')' }">

				<view class="success-name">商铺提交成功</view>

				<view class="success-desc">
					<text>商铺申请已提交</text>
					<text>请耐心等待审核</text>
				</view>

				<view class="sub-btn" @click="closePopup">好的</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupType: false,
				typeArr: [{
					id: 0,
					name: '线上/线下'
				}, {
					id: 1,
					name: '线上'
				}, {
					id: 2,
					name: '线下'
				}],
				typeIndex: -1,

				type: '', //string	是 经营类型:0=线上/线下,1=线上,2=线下
				shopname: '', //	string	是	店铺名称
				avatar: [], //	string	是	店铺头像
				name: '', //	string	是	姓名
				number: '', //	string	是	身份证号码
				mobile: '', //	string	是	手机号
				jingying_number: '', //	string	是	经营许可证号码
				city: '', //	string	是	地区
				street: '', // 所在街道
				address: '', //	string	是	自提点地址
				longitude: '', //	string	是	经度
				latitude: '', //	string	是	纬度
				image: [], //	string	是	身份证图片
				yingye_image: [], //	string	是	营业执照
				imgUrl: this.$BASE_URL_YIYUAN
			}
		},
		methods: {

			//选择地区
			selectAddresChange(e) {
				let {
					value
				} = e.detail;
				this.city = value.join('/')
			},

			//选择经营类型
			selectTypeChange(e) {
				let {
					value
				} = e.detail;
				this.typeIndex = value
				this.type = this.typeArr[value].id
			},

			//定位 获取用户信息
			getUserAddress() {
				const self = this;
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success(res) {
						let {
							longitude,
							latitude
						} = res;
						self.longitude = longitude;
						self.latitude = latitude
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								key: self.$wanlshop.config('amapkey'),
								location: `${longitude},${latitude}`
							},
							success(res2) {
								if (res2.statusCode == 200 && res2.data.status == 1) {
									let {
										regeocode: {
											addressComponent
										}
									} = res2.data
									let address =
										`${addressComponent.township}${addressComponent.neighborhood.name}`
									self.street = address
								}
							}
						})
					}
				})
			},

			// 上传图片
			addImgFile(name) {
				const self = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						// 设置url的值，显示控件
						let url = res.tempFilePaths[0];
						self.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								this.$api.upload({
									url: updata.uploadurl,
									filePath: url,
									name: 'file',
									formData: updata.storage == 'local' ? null : updata
										.multipart,
									success: res => {
										self[name].push(res.url)
									}
								});
							}
						});
					}
				});
			},

			// 清除图片
			clearImg(name, index) {
				this[name].splice(index, 1)
			},

			//查看图片
			lookImg(name, index) {
				let imgArr = this[name];
				let newImgArr = [];
				imgArr.forEach(item => {
					newImgArr.push(this.$wanlshop.oss(item))
				})
				uni.previewImage({
					urls: newImgArr,
					current: index
				})
			},

			//提交
			submit() {
				uni.showLoading()
				let self = this;
				let {
					type,
					shopname,
					avatar,
					name,
					number,
					mobile,
					jingying_number,
					city,
					address,
					longitude,
					latitude,
					image,
					yingye_image,
					street
				} = this;
				if (longitude == '' || latitude == '') {
					uni.getLocation({
						success(res) {
							self.longitude = res.longitude;
							self.latitude = res.latitude;
							self.submit()
						}
					})
					return
				}
				let data = {
					type,
					shopname,
					avatar: avatar.join(','),
					name,
					shopkeeper: name,
					number,
					mobile,
					jingying_number,
					city,
					address,
					longitude,
					latitude,
					image: image.join(','),
					yingye_image: yingye_image.join(','),
					street
				}
				self.$api.post({
					url: '/wanlshop.shop/apply',
					data,
					success(res) {
						uni.hideLoading()
						self.popupType = true;
					}
				})
			},

			//关闭弹窗‘
			closePopup() {
				this.popupType = !this.popupType;
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.page {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #FFFFFF !important;
		overflow-y: scroll;
	}

	.ipt-content-box {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.item-ipt {
		width: 100%;
		padding: 34rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-bottom: solid 2rpx #EEEEEE;
		position: relative;
	}

	.left-label-name {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
		width: 190rpx;
		text-align: left;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.right-content {
		width: 100%;
		position: relative;
	}

	.right-content input {
		width: 100%;
		height: 100%;
	}

	.right-content textarea {
		width: 100%;
		height: 80rpx;
	}

	.right-content .picker {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		font-size: 30rpx;
	}

	.picker-right-icon {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.border-none {
		border: none !important;
	}

	.user-address {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 500;
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 99;
	}

	.user-address image {
		width: 27rpx;
		height: 34rpx;
		margin-bottom: 10rpx;
	}

	.kong {
		width: 100%;
		height: 20rpx;
		background-color: #F7F7F7;
	}

	.place-color {
		color: #808080;
	}

	.bottom-upfile-box {
		display: flex;
		flex-direction: column;
	}

	.item-file-box {
		width: 100%;
		padding: 60rpx 30rpx 43rpx;
		box-sizing: border-box;
	}

	.upfile-title {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
		margin-bottom: 44rpx;
	}

	.img-content {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.img-box {
		width: 190rpx;
		height: 190rpx;
		margin-right: 35rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.img-box image {
		width: 100%;
		height: 100%;
	}

	.img-box .clear-img {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		z-index: 3;
	}

	.border-btm {
		border-bottom: solid 2rpx #EEEEEE;
	}

	.submit-btn-box {
		padding: 0 30rpx;
		margin: 80rpx 0;
	}

	.submit-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(90deg, #FE5603, #FD6400);
		border-radius: 40rpx;
		font-size: 32rpx;
		color: white;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shop-popup-box {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .6);
		z-index: 999;
	}

	.success-box {
		width: 470rpx;
		height: 540rpx;
		background-color: white;
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 25%;
		border-radius: 40rpx;
		padding: 300rpx 58rpx 0;
		box-sizing: border-box;
	}

	.success-name {
		width: 100%;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		top: 45rpx;
		text-align: center;
		left: 0;
	}

	.success-desc {
		display: flex;
		flex-direction: column;
		padding: 25rpx 82rpx;
		border-bottom: solid 1rpx #D6D6D6;
		font-size: 27rpx;
		color: #131313;
		font-weight: 500;
	}

	.sub-btn {
		width: 235rpx;
		height: 60rpx;
		background: #3199FF;
		box-shadow: 0px 8rpx 12rpx 6rpx rgba(0, 101, 196, 0.16);
		border-radius: 29rpx;
		font-size: 23rpx;
		color: white;
		font-weight: 500;
		margin: 27rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>
